<template>
    <div class="card-item h-full py-2 px-5 rounded-lg flex items-center card">
      <div class="w-3/4 h-full text-center">
        <div class="p-2 font-bold text-lg">{{ item.productionLineCode }}</div>
        <div class="p-2 font-bold text-lg">{{ item.materialCode }}</div>
        <span class="inline-block px-2 py-0.5 font-bold text-sm tag-box mb-2">{{ item.design }}</span>
      </div>
      <div class="w-6/12 h-full flex justify-center items-center" >
        <div class="rounded-box flex justify-center items-center" >
          <div class="rounded-box-tow flex justify-center items-center" >
            <div class="rounded-box-three flex justify-center items-center" >
              <el-icon :size="30" style="color: #ffffff;">
                <component :is="getIconByIndex(index)" />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script setup name="CardItem">
  import { defineProps } from 'vue'
  import {
    Monitor,
    Setting,
    Tools,
    Box,
    Connection,
    DataBoard,
    Histogram,
    TrendCharts,
    Cpu,
    Switch,
    Platform,
    Grid,
    Operation,
    Management,
    DataAnalysis,
    PieChart
  } from '@element-plus/icons-vue'

  const props = defineProps({
    index: { type: Number },
    item: { type: Object }
  })

  // 根据索引返回不同的图标
  const getIconByIndex = (index) => {
    const icons = [
      Monitor,      // 显示器
      Setting,      // 设置
      Tools,        // 工具
      Box,          // 盒子
      Connection,   // 连接
      DataBoard,    // 数据面板
      Histogram,    // 柱状图
      TrendCharts,  // 趋势图
      Cpu,          // CPU
      Switch,       // 开关
      Platform,     // 平台
      Grid,         // 网格
      Operation,    // 操作
      Management,   // 管理
      DataAnalysis, // 数据分析
      PieChart      // 饼图
    ]

    // 如果索引超出图标数组长度，循环使用
    return icons[index % icons.length]
  }
  </script>

  <style scoped lang="scss">
  .card-item {
    flex-shrink: 0;
    width: 380px; /* 固定宽度，确保卡片不会收缩 */
    // margin-bottom: 10px;
    border:1px solid #b4d8ff;
    background-image: url("/@/assets/images/cardbg.png");
    background-position: center;
    background-size: cover;

    .tag-box{
      animation: breathe 2s infinite; /* 添加动画 */
      height: 30px;
      border-radius: 8px;
      background: rgba(131, 211, 243, 0.82);
      line-height: 24px;
    }
    .rounded-box{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(184, 220, 234, 0.82);
      animation: breathe 2s infinite; /* 添加动画 */
      .rounded-box-tow{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: rgba(59, 176, 228, 0.82);
        .rounded-box-three{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: rgba(18, 160, 225, 0.82);
        }
      }
    }
    /* 定义动画 */
    @keyframes breathe {
      0%, 100% {
        transform: scale(1); /* 初始和结束状态 */
      }
      50% {
        transform: scale(1.1); /* 在中间状态放大 */
      }
    }
  }
  </style>
